<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务状态 - {{ task.id }}</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
        }
        .task-info {
            background-color: #e9ecef;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        .status-pending {
            color: #ffc107;
            font-weight: bold;
        }
        .status-running {
            color: #17a2b8;
            font-weight: bold;
        }
        .status-completed {
            color: #28a745;
            font-weight: bold;
        }
        .status-failed {
            color: #dc3545;
            font-weight: bold;
        }
        .log-container {
            background-color: #000;
            color: #00ff00;
            padding: 15px;
            border-radius: 5px;
            height: 400px;
            overflow-y: auto;
            font-family: 'Courier New', monospace;
            white-space: pre-wrap;
            margin-bottom: 20px;
            unicode-bidi: embed;
            font-size: 14px;
        }
        .actions {
            text-align: center;
            margin-bottom: 20px;
        }
        button {
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin: 0 5px;
        }
        button:hover {
            background-color: #0056b3;
        }
        .back-link {
            margin-bottom: 20px;
        }
        .back-link a {
            color: #007bff;
            text-decoration: none;
        }
        .back-link a:hover {
            text-decoration: underline;
        }
        .video-result {
            margin-top: 20px;
            padding: 15px;
            background-color: #d4edda;
            border: 1px solid #c3e6cb;
            border-radius: 5px;
        }
        .video-url {
            word-break: break-all;
            color: #007bff;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="back-link">
            <a href="{{ url_for('local_file') }}">&larr; 返回本地文件处理页面</a>
        </div>
        
        <h1>本地文件任务 #{{ task.id }} 状态</h1>
        
        <div class="task-info">
            <p><strong>状态:</strong> <span class="status-{{ task.status }}">{{ task.message }}</span></p>
            <p><strong>视频描述:</strong> <span id="prompt-value">{{ task.prompt or '未提供' }}</span></p>
            {% if task.negative_prompt %}
            <p><strong>负面描述:</strong> <span id="negative-prompt-value">{{ task.negative_prompt }}</span></p>
            {% endif %}
            <p><strong>分辨率:</strong> <span id="resolution-value">{{ task.resolution or '1080P' }}</span></p>
        </div>
        
        {% if task.video_url %}
        <div class="video-result">
            <h3>视频生成成功!</h3>
            <p><strong>视频链接:</strong></p>
            <p class="video-url"><a href="{{ task.video_url }}" target="_blank">{{ task.video_url }}</a></p>
            <p><small>点击链接在新窗口打开视频</small></p>
        </div>
        {% endif %}
        
        <div class="actions">
            <button onclick="refreshStatus()">刷新状态</button>
            <button onclick="window.location.href='{{ url_for('local_file') }}'">提交新任务</button>
        </div>
        
        <h3>执行日志:</h3>
        <div class="log-container" id="logContainer">{{ task.log }}</div>
    </div>

    <script>
        function refreshStatus() {
            fetch('{{ url_for('api_local_file_task_status', task_id=task.id) }}')
                .then(response => {
                    if (response.status === 404) {
                        // 应用重启导致任务信息丢失
                        document.querySelector('.task-info').innerHTML = `
                            <p><strong>状态:</strong> <span class="status-failed">任务信息已丢失</span></p>
                            <p><strong>视频描述:</strong> <span id="prompt-value">{{ task.prompt or '未提供' }}</span></p>
                            <p><strong>分辨率:</strong> <span id="resolution-value">{{ task.resolution or '1080P' }}</span></p>
                        `;
                        document.getElementById('logContainer').textContent = '应用已重启，任务信息丢失。请检查视频生成结果或重新提交任务。';
                        return Promise.reject('Task info lost due to app restart');
                    }
                    return response.json();
                })
                .then(data => {
                    // 更新状态信息显示
                    let statusClass = 'status-' + data.status;
                    let negativePromptHtml = '';
                    if (data.negative_prompt) {
                        negativePromptHtml = `<p><strong>负面描述:</strong> <span id="negative-prompt-value">${data.negative_prompt}</span></p>`;
                    }
                    
                    document.querySelector('.task-info').innerHTML = `
                        <p><strong>状态:</strong> <span class="${statusClass}">${data.message || '未知'}</span></p>
                        <p><strong>视频描述:</strong> <span id="prompt-value">${data.prompt || '未提供'}</span></p>
                        ${negativePromptHtml}
                        <p><strong>分辨率:</strong> <span id="resolution-value">${data.resolution || '1080P'}}</span></p>
                    `;
                    
                    // 处理日志文本，确保正确显示中文
                    const logText = data.log || '';
                    document.getElementById('logContainer').textContent = logText;
                    
                    // 如果有视频URL则显示
                    if (data.video_url) {
                        const videoResult = document.querySelector('.video-result');
                        if (videoResult) {
                            videoResult.innerHTML = `
                                <h3>视频生成成功!</h3>
                                <p><strong>视频链接:</strong></p>
                                <p class="video-url"><a href="${data.video_url}" target="_blank">${data.video_url}</a></p>
                                <p><small>点击链接在新窗口打开视频</small></p>
                            `;
                        } else {
                            const videoDiv = document.createElement('div');
                            videoDiv.className = 'video-result';
                            videoDiv.innerHTML = `
                                <h3>视频生成成功!</h3>
                                <p><strong>视频链接:</strong></p>
                                <p class="video-url"><a href="${data.video_url}" target="_blank">${data.video_url}</a></p>
                                <p><small>点击链接在新窗口打开视频</small></p>
                            `;
                            document.querySelector('.container').insertBefore(videoDiv, document.querySelector('.actions'));
                        }
                    }
                    
                    // 如果任务未完成，5秒后自动刷新
                    if (data.status !== 'completed' && data.status !== 'failed') {
                        setTimeout(refreshStatus, 5000);
                    }
                })
                .catch(error => {
                    if (error !== 'Task info lost due to app restart') {
                        console.error('获取状态失败:', error);
                        // 继续尝试刷新，除非明确停止
                        setTimeout(refreshStatus, 5000);
                    }
                });
        }
        
        // 如果任务仍在运行，定期刷新状态
        {% if task.status not in ['completed', 'failed'] %}
        setTimeout(refreshStatus, 5000);
        {% endif %}
    </script>
</body>
</html>